<template>
	<view class="forgot-pwd-page">
		<view class="head">
			<view class="left">
				<view class="back">
					<uni-icons class="back-icon" type="left" size="32" @click="goLogin"></uni-icons>
				</view>
				<view class="title">找回密码</view>
				<view class="tip">
					输入验证码并验证手机号
				</view>
			</view>
			<view class="right">
				<image class="forgot-img" src="@/static/img/login/find-pwd.png"></image>
			</view>
		</view>

		<view class="content">
			<view class="item">
				<view class="title">
					手机号
				</view>
				<view class="input-box account">
					<view class="code">+86</view>
					<input class="inp" type="number" v-model="account.username" placeholder="请输入手机号"
						@input="changeAccountVal" />
					<image class="clean-icon" src="@/static/img/login/clean.png" v-if="isShowClearAccountIcon"
						@click="cleanAccountVal"></image>
				</view>
			</view>
			<view class="item">
				<view class="title">
					验证码
				</view>
				<view class="input-box">
					<input class="inp" type="number" v-model="account.code" placeholder="请输入验证码"
						@input="changeAccountVal" />
					<view class="getCode" v-if="!isGetCode" @click="getCode">
						获取验证码
					</view>
					<view class="wait" v-else>
						<text class="getCode">{{waitTime}}</text> 秒后重新发送
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title">
					新密码
				</view>
				<view class="input-box pwd">
					<input class="inp" :password="!isShowPwd" placeholder="请输入新密码" v-model="account.password"
						@input="changePwdVal" />
					<block v-if="isShowClearPwdIcon">
						<image class="clean-icon" src="@/static/img/login/clean.png" @click="cleanPwdVal"></image>
						<image class="pwd-icon" src="@/static/img/login/pwd.png" v-if="!isShowPwd"
							@click="changShowPwd"></image>
						<image class="pwd-icon" src="@/static/img/login/pwd-show.png" v-else @click="changShowPwd">
						</image>
					</block>
				</view>
			</view>
		</view>
		<Button3 @click="updateLogin">确认密码</Button3>
		<!-- 提示弹窗 -->
		<MessageTip ref="myMessage" />
		<!-- 修改成功弹窗 -->
		<ForgotPwdPopup v-if="isUpdateSuccess" />
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import MessageTip from '@/components/messageTip/messageTip.vue'
	import Button3 from '@/components/button3/button3.vue';
	import ForgotPwdPopup from '@/components/forgotPwdPopup/forgotPwdPopup.vue';
	// 消息弹窗信息
	const myMessage = ref()

	// 是否显示清空账号值图标
	const isShowClearAccountIcon = ref(false)
	// 是否显示清空密码图标
	const isShowClearPwdIcon = ref(false)
	// 是否显示loading按钮
	const isShowLoading = ref(false)
	// 是否明文显示密码
	const isShowPwd = ref(false)
	// 账号信息
	const account = reactive({
		username: '',
		code: '',
		password: ''
	})
	// 改变账号值
	const changeAccountVal = () => {
		isShowClearAccountIcon.value = account.username == '' ? false : true
	}
	// 清除账号值
	function cleanAccountVal() {
		account.username = ''
	}

	// 改变密码值
	const changePwdVal = () => {
		isShowClearPwdIcon.value = account.password == '' ? false : true
	}
	// 清空密码的值
	const cleanPwdVal = () => {
		account.password = ''
	}
	// 显示隐藏密码
	const changShowPwd = () => {
		isShowPwd.value = !isShowPwd.value
	}
	// 是否获取验证码
	const isGetCode = ref(false)
	const waitTime = ref(60)
	// 获取验证码
	const getCode = () => {
		const phoneNumberRegex = /^(\+?\d{1,3}[-\s]?)?\d{11}$/;
		if (phoneNumberRegex.test(account.username)) {
			isGetCode.value = true
			let timer = setInterval(() => {
				if (waitTime.value > 0) {
					waitTime.value -= 1;
				} else {
					clearInterval(timer)
					isGetCode.value = false;
					waitTime.value = 60;
				}
			}, 1000)
		} else {
			myMessage.value.open('error', '请填写正确的手机号码')
		}
	}
	// 是否修改成功
	const isUpdateSuccess = ref(false)
	// 登录
	function updateLogin() {
		if (account.username == '' || account.code == '' || account.password == '') {
			return myMessage.value.open('error', '请将信息填写完整')
		}
		if (!isShowLoading.value) {
			isShowLoading.value = true
			isUpdateSuccess.value = true
			console.log('登录开始了。。。。。。。')
		}
	}

	// 重置表单
	function resetForm() {
		account.username = ''
		account.code = ''
		account.password = ''
	}
	// 去登录页面
	function goLogin() {
		resetForm()
		uni.switchTab({
			url: '/pages/login/login'
		})
	}
</script>

<style scoped lang="scss">
	.forgot-pwd-page {
		padding: 0rpx 48rpx;


		.head {
			display: flex;
			justify-content: space-between;
			// align-items: center;
			margin: 0rpx -48rpx;
			padding: 116rpx 48rpx 0rpx;
			background: linear-gradient(#92C7FF, #FFFFFF);

			.left {
				.back {
					margin-top: 10rpx;
					margin-bottom: 70rpx;
				}

				.title {
					margin-bottom: 6rpx;
					font-size: 56rpx;
					font-weight: 600;
					color: #000;
					line-height: 66rpx;
				}

				.tip {
					font-size: 24rpx;
					color: #989DA5;
					line-height: 28rpx;
				}
			}

			.forgot-img {
				width: 310rpx;
				height: 310rpx;
			}
		}

		.item {
			margin-bottom: 32rpx;

			.title {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #000;
			}

			.input-box {
				display: flex;
				align-items: center;
				padding: 28rpx 20rpx;
				// height: 96rpx;
				font-size: 28rpx;
				border-radius: 8rpx;
				background-color: rgba(208, 215, 228, 0.2);
				box-sizing: border-box;

				&.pwd {
					.clean-icon {
						margin-right: 22rpx;
					}
				}

				.code {
					margin-right: 20rpx;
					padding-right: 20rpx;
					color: #989DA5;
					border-right: 2rpx solid #989DA5;
				}

				.inp {
					flex: 1;
				}

				.clean-icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 84rpx;
				}

				.pwd-icon {
					width: 36rpx;
					height: 42rpx;
					margin-right: 26rpx;
				}

				.getCode {
					color: $primary-color;
					font-size: 28rpx;

				}
			}

		}

	}
</style>